<template>
  <v-chart class="chart" :option="option" autoresize />
</template>

<script lang="ts" name="UserInf" setup>
import { use } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { PieChart, BarChart, LineChart } from "echarts/charts";
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent,
} from "echarts/components";
import VChart from "vue-echarts";
import { ref } from "vue";

use([
  CanvasRenderer,
  PieChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent,
  BarChart,
  LineChart,
]);

// provide(THEME_KEY, "dark");

const option = ref({
  grid: {
    left: 20,
    right: 20,
    bottom: 20,
    top: 20,
    containLabel: true,
  },
  xAxis: {
    type: "category",
    // 网格样式
    splitLine: {
      show: true,
      lineStyle: {
        color: ["#eaeaec"],
        width: 1,
        type: "dashed",
      },
    },
    data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
  },
  yAxis: {
    type: "value",
    // 网格样式
    splitLine: {
      show: true,
      lineStyle: {
        color: ["#eaeaec"],
        width: 1,
        type: "dashed",
      },
    },
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: "bar",
      barWidth: 30, // 设置柱子宽度为30
      // showBackground: true,
      // backgroundStyle: {
      //   color: "rgba(180, 180, 180, 0.2)",
      // },
    },
  ],
});
</script>

<style scoped>
.chart {
  height: 100%;
}
</style>
